<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>起步</title>
</head>

<body>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link :to="{ name: 'user', params: { userId: 123 }}">User123</router-link>
      <button v-on:click="$router.push({ name: 'user', params: { userId: 456 }})">User456</button>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
    const User = {
      template: '<div>User {{ $route.params.userId }}</div>'
    }

    const router = new VueRouter({
      routes: [{
        path: '/user/:userId',
        name: 'user',
        component: User
      }]
    })

    const app = new Vue({
      router
    }).$mount('#app')

  </script>
</body>

</html>
